<template>
  <div class="ItemFormBox">
    <el-form v-if="componentLoadFlag" ref="form" :model="props.modelValue" label-width="80px" @submit.prevent>
      <!-- v-for="field in Object.keys(props.modelValue).filter(item => editableFieldArr.includes(item))" -->
      <el-form-item
        v-for="field in editableFieldArr.filter(item => props.modelValue.hasOwnProperty(item))"
        :key="field"
        :label="transforJson[field]"
        :prop="field"
      >
        <component :is="componentMap[field]" v-model="props.modelValue[field]" />
        <!-- <template v-if="editableFieldArr.includes(key)">
        </template> -->
      </el-form-item>
    </el-form>    
  </div>
</template>

<script setup>
import { reactive, ref, toRefs,getCurrentInstance,watch,nextTick  } from 'vue';
import { editableFieldArr, transforJson } from './transfer';
// import formItemName from './ItemForm/formItemName/index.vue'
// import labelName from './ItemForm/labelName/index.vue'
const componentLoadFlag = ref(false)
const componentMap = {};
window.componentLoadFlag = componentLoadFlag
window.componentMap = componentMap
const requireComponent = import.meta.glob('./ItemForm/*/index.vue');
let promiseArr = []
for (const [path, definition] of Object.entries(requireComponent)) {
  // 注意ItemForm下的文件夹名称是有严格规范的，和props.foramData对象上的属性一一对应
  let componentName = path.split('./ItemForm/')[1].split('/index.vue')[0];
  promiseArr.push(definition().then(component => {
    componentMap[componentName] = component.default;
  }))
}
// const vm = getCurrentInstance();
Promise.all(promiseArr).then(()=>{
  componentLoadFlag.value = true
  // console.log('%c componentMap','font-size:24px;color:red;',componentMap)
  // console.log('%c vm','font-size:24px;color:red;',vm)
  // vm.proxy.$forceUpdate();
})
const props = defineProps({
  modelValue: {
    type: Object,
    default: ()=>{},
  },
});
// const props = defineProps({
//   formData: Object
// });
// setInterval(()=>{
//   console.log('%c props.modelValue','font-size:24px;color:red;',props.modelValue)
// },4000)

// let formData = reactive({})
// const emit = defineEmits(['update:modelValue']);

// console.log('%c watch','font-size:24px;color:red;',watch)

// watch(formData, (newValue) => {
//   console.log('%c newValue','font-size:24px;color:red;',newValue)
//   emit('update:modelValue', newValue);
// });
watch(props, (newValue) => {
  // 如果不这样做，传进来新的modelValue没有让form组件发生变化
  componentLoadFlag.value = false
  nextTick(() => {
    // console.log('%c props.modelValue','font-size:24px;color:red;',props.modelValue)
    componentLoadFlag.value = true
  })
},{deep:true});
const submitForm = () => {
  form.value.validate(valid => {
    if (valid) {
      console.log('Form Submitted:', formData);
    } else {
      console.log('Form Validation Failed');
    }
  });
};

const resetForm = () => {
  form.value.resetFields();
};
</script>
<style lang="scss" scoped>
.ItemFormBox {
  min-height: 350px;
  max-height: 600px;
  overflow: auto;
  padding-right: 20px;
  .el-form-item--small {
    margin-bottom: 10px;
  }
}
  
</style>
